<template>
	<view>
		<view v-if='$auth.hasRoleOr(["region", "captain"])'>
			<view class="team">
				<view class="card" style="background: linear-gradient(314deg,#3d8cff,#49a8ff);"
					@click="$tab.navigateTo('/pages/team/member')">
					团队成员>
				</view>
				<view class="card" style="background: linear-gradient(315deg,#ff983f,#ffb36d);"
					@click="$tab.navigateTo('/pages/team/achievement')">
					团队战绩>
				</view>
				<view class="card" style="background: linear-gradient(317deg,#57c376,#6adb8a);"
					@click="$tab.navigateTo('/pages/mine/rankingList')">
					荣誉榜>
				</view>
			</view>
			<view class="team" style="background-color: aliceblue;border-radius: 10rpx;">
				<view class="td">
					<h2>{{ statis.people}}</h2>
					<text>团队人数</text>
				</view>
				<view class="td">
					<h2>{{ statis.query}}</h2>
					<text>累计单数</text>
				</view>
				<view class="td">
					<h2>{{zeroTwo(statis.income)}}</h2>
					<text>团队总收入</text>
				</view>
			</view>
			<view style="margin: 6px 6px 0px">
				<uni-notice-bar style="background-color: white;margin-bottom: 0px;" show-icon scrollable :text="msg" />
			</view>

			<table :loading="loading">
				<tr>
					<th colspan="2" class="td">您的收入</th>
				</tr>
				<tr v-if="tableData.length == 0">
					<td colspan="2" class="td">暂无！</td>
				</tr>
				<template v-for="(item, index) of tableData">
					<tr>
						<td class="td">{{item.nickName}}</td>
						
						<td class="td">
							<span style="font-size: 20px;color: red;">{{ zeroTwo(item.amount)}}</span>
						</td>
					</tr>
					<tr>
						<td class="td">{{item.keyword}}</td>
						<td class="td">{{ item.createTime}}</td>
					</tr>
					<tr style="background-color: aliceblue;">
						<td colspan="2"></td>
					</tr>
				</template>
			</table>
		</view>
		<view v-if='$auth.hasRoleOr(["ordinary", "member"])' style="text-align: center;padding-top: 40vh;">
			<h2>您还未组建团队</h2>
			<button @click="$tab.navigateTo('/pages/mine/upgrade')" type="primary"
				style="width: 80vw;">点击去升级组建团队</button>
		</view>
	</view>
</template>

<script>
	import {
		msg
	} from '@/api/index.js'

	import {
		teamStatistics,
		teamIncome
	} from '@/api/team.js'

	export default {
		data() {
			return {
				statis: {
					income: 0,
					people: 0,
					query: 0
				},
				msg: '欢迎注册使用！',

				loading: true,
				tableData: []
			}
		},
		mounted() {
			msg('groupMsg').then(res => {
				this.msg = res
			})
			teamStatistics().then(res => {
				console.log(res)
				this.statis = res
			})
			teamIncome().then(res => {
				this.tableData = res.data
				// console.log('--this.tableData--', this.tableData)
				this.loading = false
			})
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.team {
		margin: 6px 6px 0;
		text-align: center;
		display: flex;
		justify-content: space-between;

		.card {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 31vw;
			height: 130rpx;
			border-radius: 16rpx;
			color: #fff;
		}

		.td {
			width: 28vw;
			align-items: center;
			padding: 36rpx 0;
		}
	}

	table {
		width: 97vw;
		margin: 6px 6px 0;
		background-color: #fff;
		border-radius: 4px;
	}

	.td {
		width: 50vw;
		padding-top: 2px;
		text-align: center;
	}
</style>